<template>
  <view class="app-container">
    <image class="background" src="/static/images/background.png" mode="aspectFill"></image>

    <view class="bar-box" :style="{ marginTop: titleMargin + 'px' }">
      <image class="back" src="/static/images/back.png" @click="back"></image>
      <view class="title">收益明细</view>
    </view>

    <view class="th-box">
      <view class="th">金额</view>
      <view class="th">描述</view>
      <view class="th">日期</view>
    </view>

    <scroll-view scroll-y enable-flex @scrolltolower="loadMore" class="td-box">
      <view class="box" v-for="(item, index) in list" :key="index">
        <view class="td">{{ item.profit }}</view>
        <view class="td desc">{{ item.desc }}</view>
        <view class="td">{{ item.update_time }}</view>
      </view>
    </scroll-view>

  </view>
</template>

<script>
export default {
  data() {
    return {
      titleMargin: 0, // 动态顶部间距
      list: [],
      page: 1,
      pagesize: 10
    };
  },
  created() {
    this.setDynamicMargin(); // 设置动态间距
  },

  onLoad: function (){
    uni.hideShareMenu();

    this.profitList();
  },

  methods: {
    setDynamicMargin() {
      const windowInfo = uni.getWindowInfo();
      this.titleMargin = windowInfo.statusBarHeight + 10; // 直接使用状态栏高度
    },

    back: function (){
      uni.navigateBack();
    },

    loadMore: function () {
      this.profitList(this.page + 1);
    },


    profitList: function (incPage = 0) {
      var page = incPage ? incPage : this.page;

      uni.showLoading({
        title: '数据加载中...',
        mask: true
      })

      this.$http.post('/index/Api/profitList', {
        user_id: uni.getStorageSync('user_id'),
        page: page,
        pagesize: this.pagesize
      }).then((res) => {
        if (res.data.result == 1) {
          if (page == 1) {
            this.list = res.data.data;
          } else {
            // 加载更多
            var list = this.list;

            for (var i = 0; i < res.data.data.length; i++) {
              list.push(res.data.data[i]);
            }

            this.list = list;
            this.page = page;
          }

          setTimeout(() => {
            uni.hideLoading();
          }, 500)
        } else {
          uni.hideLoading();
          if (page == 1) {
            this.list = [];
          } else {
            this.$common.doErrorResult(res);
          }
        }
      })
    },
  },

}
</script>

<style lang="scss">
.app-container {
  display: flex;
  flex-direction: column;
  align-items: center;

  .th-box {
    width: 85%;
    padding: 10rpx 20rpx;
    font-size: 36rpx;
    background: $main-background;
    border-radius: 40rpx;
    margin-top: 40rpx;
    display: flex;
    justify-content: space-between;

    .th{
      width: 33%;
      text-align: center;
    }
  }

  .td-box {
    width: 85%;
    padding: 30rpx 20rpx;
    font-size: 32rpx;
    background: $main-background;
    border-radius: 20rpx;
    margin-top: 20rpx;
    display: flex;
    flex-direction: column;
    height: 75vh;

    .box{
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 30rpx;
      &:last-child{
        margin-bottom: 0;
      }

      .td{
        width: 30%;
        text-align: center;
      }
    }
  }
}
</style>

